<template>
  <page-header-wrapper
    :tab-list="tabList"
    :tab-active-key="tabActiveKey"
    :tab-change="handleTabChange"
  >
    <template v-slot:title>
      <div class="title" />
    </template>

    <router-view />
  </page-header-wrapper>
</template>

<script>
const BASE_URL = '/index/system/logs'

export default {
  data () {
    return {
      tabList: [
        { key: '1', tab: '登录日志' },
        { key: '2', tab: '操作日志' },
        { key: '3', tab: '自动扣款记录' },
      ],
      tabActiveKey: '1',
      search: true,
    }
  },

  computed: {
    // route url
    routerPath () {
      return `${BASE_URL}`
    },
  },

  created () {
    this.tabActiveKey = this.getActiveKey(this.$route.path)

    this.$watch('$route', (val) => {
      this.tabActiveKey = this.getActiveKey(val.path)
    })
  },
  methods: {
    getActiveKey (path) {
      console.log(path, '121212')
      switch (path) {
        case `${this.routerPath}/login`:
          return '1'
        case `${this.routerPath}/operation`:
          return '2'
        case `${this.routerPath}/automatic-deduction`:
          return '3'
        default:
          return '1'
      }
    },

    handleTabChange (key) {
      this.tabActiveKey = key
      switch (key) {
        case '1':
          this.$router.push({
            name: 'LogsLogin',
          })
          break
        case '2':
          this.$router.push({
            name: 'LogsOperation',
          })
          break
        case '3':
          this.$router.push({
            name: 'LogsAutomaticDeduction',
          })
          break
        default:
          this.$router.push('/workplace')
      }
    },
  },
}
</script>

<style lang="less" scoped>

</style>
